@font-face
  font-family: 'Microsoft Yahei'
  src: url(./fonts/msyh.ttf)
@font-face
  font-family: 'FZZhengHeiS-B-GB'
  src: url(./fonts/fzzchjw.ttf)
@font-face
  font-family: 'SourceHanSansCN'
  src: url(./fonts/SourceHanSansCN-Medium.ttf)

// body *
//   // font-family: SourceHanSansCN, Microsoft YaHei, ArialMT
//   font-family: Microsoft YaHei, ArialMT

  // predefined
.breadcrumb-back-btn
  border-radius: 5px 5px 5px 5px
  border: 1px solid rgba(201,201,201,1)
  background: $background
  height: 32px
  font-size: 14px
  font-weight: 400
  color: rgba(90,90,90,1)
  margin-right: 5px
  .q-btn__wrapper
    padding-top: 0
    &:hover
      background: rgba(217,232,242,1)
    .q-btn__content
      line-height: 30px
      .q-icon
        line-height: 32px
        padding-right: 10px

.btn-primary
  height: 33px
  background: $primary
  // background: rgba(255,29,63,1)
  border-radius: 5px
  font-size: 14px
  font-weight: 400
  color: rgba(255,255,255,1)
  .q-icon
    font-size: 14px
  &:hover
    opacity: 0.9
    // background: rgba(234,7,50,1)
    // background: rgba(234,7,50,1)
  &.disabled
    background: $grey-6

.btn-secondary
  @extend .btn-primary
  background: $secondary
  // background: rgba(243,152,0,1)
  // &:hover
    // opacity: 0.9
    // background: rgba(255,0,0,1)

.btn-cancel,.cancel-btn
  @extend .btn-secondary
  min-width: 125px
  background: rgba(84,176,247,1)
  &:hover
    background: rgba(84,176,247,1)
  &.disabled
    background: $grey-6

.btn-ok,.ok-btn,.save-btn,.btn-save
  @extend .btn-secondary
  width: 125px

// general
.q-table
  td,th
    padding: 0px 6px
  thead
    font-size: 16px
    font-weight: 400
    color: rgba(142,142,142,1)
  .persistant-top-row, .persistant-bottom-row
    // position: absolute
    // border: 0 !important
    // left: 0
    // right: 0
    height: 6px
  .persistant-top-row *,.persistant-bottom-row *
    position: absolute
    border: 0 !important
    left: 0
    right: 0
    width: 100%
    height: 1px
    background: $bodyBackground
  .persistant-bottom-row *
    margin-top: 30px
  &--horizontal-separator thead th
    border-bottom: 0

.zebra-even
  background: $zebraEvenColor !important
.zebra-odd
  background: $zebraOddColor !important

.q-stepper
  background: rgba(0,0,0,0)
  box-shadow: none
  .q-stepper__header
    background: $background
    margin-bottom: 16px
    .q-stepper__header--border
      border: 0
    .q-stepper__label
      margin-top: 5px !important
    .q-stepper__tab:not(:first-child)
      padding-left: 128px
    .q-stepper__dot::after
      margin-left: 16px
    .q-stepper__dot::before
      margin-right: 16px
  .q-stepper__content
    background: $background

.q-table__bottom--nodata
  min-height: 304px
  font-size: 16px
  font-weight: bold
  color: rgba(142,142,142,1)

.flow-list
  tbody td:before
    background: rgba(0, 0, 0, 0)
  .q-th
    margin: 0 25px
  .filter-header-cell
    position: absolute
    right: 0
    top: 6px
    padding-right: 24px
  .q-table__container
    position: relative
    // padding: 0 25px
  .q-table__middle
    overflow: hidden
  .table-row
    cursor: pointer
    .q-td
      max-width: 300px
      padding: 0
    .q-td .table-cell
      display: flex
      align-items: center
      justify-content: center
      height: $tableCellHeight
      // margin-top: 20px
      padding: 0 8px
      // border-top: 1px dashed rgba(170,170,170,1)
      // border-bottom: 1px dashed rgba(170,170,170,1)
    // .q-td:last-child .table-cell
    //   border-right: 1px dashed rgba(170,170,170,1)
    // .q-td:first-child .table-cell
    //   border-left: 1px dashed rgba(170,170,170,1)
    .flow-list-status-td
      width: 160px
      max-width: 300px !important
      min-width: 160px !important
    .step-status-wrapper
      display: flex
    .step-icon
      position: absolute
      left: 0px
      width: 45px
      height: 45px
      margin-right: 6px
      font-size: 45px
      line-height: 45px
    .status-info
      position: absolute
      left: 50px
      text-align: left
    .step-title,.status-0,.status-1,.status--1
      font-size: 14px
      font-weight: 400
      color: rgba(142,142,142,1)
    .step-status
      font-size: 12px
    .status-1
      color: rgba(99,188,129,1)
    .status-1 .step-icon
      color: rgba(99,188,129,1)
    .status--1
      color: rgba(236,109,112,1)
    .status--1 .step-icon
      color: rgba(236,109,112,1)
  .to-details-td
    width: 20px
    // min-width: 20px
    // max-width: 90px
    // cursor: pointer
    // &:hover
    //   .to-details>div
    //     background: rgba(217,232,242,1)
  .table-row td
    font-size: 14px
    font-weight: 400
    color: rgba(142,142,142,1)
    .to-details
      height: 80px
      width: 20px
      // &:before
      //   content: ''
      //   background: black
      //   width: 1px
      //   height: 64px
      //   position: absolute
      //   left: 0px
      //   background: rgba(210,210,210,1) !important
    .to-details>div
      font-size: 18px
      position: absolute
      right: 5px
      width: 30px
      height: 80px
      border-radius: 5px
      color: #9FA0A0
      line-height: 80px
      text-align: center
  .q-table__bottom
    border: 0
    margin-top: 20px
  .filter-row
    cursor: initial
    // position: relative
    // top: 30px
    // .filter-cell
    //   border: 1px dashed
    td
      border: 0
    .input-field-wrapper
      .field-label
        width: auto
        min-width: 56px
        margin: 0 4px
        font-size: 12px
        font-weight: 400
        line-height: 40px
        color: rgba(142,142,142,1)
        &::after
          content: ''
      .q-field__before
        padding: 0
      .q-field__control
        max-width: 150px
        &::before
          border: 0
          border-radius: 0
      .keyword
        .q-field__control
          width: 320px
          max-width: 320px
      .input-field-select-chain
        align-items: center
        span
          &:nth-child(2)
            margin-left: 0 !important

    .query-btn, .export-btn
      @extend .btn-primary
    .clear-btn
      @extend .btn-secondary

.breadcrumbs
  // margin-bottom: 10px
  padding: 0 5px 0 25px
  height: 48px
  background: $background
  border-radius: 5px 5px 5px 5px
  font-size: 14px
  font-weight: 400
  line-height: 48px
  &>div
    margin-top: unset
    &>div
      margin-top: unset
    &>button
      margin-top: unset

  .q-breadcrumbs__separator
    width: 16px
    text-align: center
    font-size: 14px
    line-height: 48px
  .q-btn
    @extend .breadcrumb-back-btn
    .q-btn__wrapper
      min-height: 1em
      padding-bottom: 0

.q-carousel__slide
  padding: 0

.input-field-wrapper
  margin: 16px 0

.q-field__marginal
  height: auto
  // height: 35px
// .q-field__append.q-field__marginal.row.no-wrap.items-center.q-anchor--skip
//   height: 100%
.q-field--auto-height .q-field__control, .q-field--auto-height .q-field__native
  min-height: 35px !important

.q-field__label
  top: 0 !important
  line-height: 35px
  font-size: 14px
.q-field--float .q-field__label
  display: none

.q-field__control-container
  padding-top: 0 !important

.q-field__control
  border: 0 !important
  &::before
    border-color: $grey-5
  &::after
    // display: none
    // margin: 0 5px
  &:hover
    background: rgba(210,210,210,1) !important

.q-field--focused
  .q-field__control
    &::before
      border-radius: 5px !important
      border: 1px solid rgba(126,206,244,1) !important
.q-menu.input-field-select-control
  border: 1px solid rgba(126,206,244,1) !important

.q-field--error
  .q-field__control
    border: 1px solid var(--q-color-negative) !important
    &::after
      display: none
.input-field--error
  border-color: var(--q-color-negative) !important
  &-tag
    color: var(--q-color-negative) !important
    position: absolute
    top: 0
    right: 0
    z-index: 2
    .e-icon>.q-icon
      position: absolute

.q-textarea .q-field__native
  padding: 4px !important

// input field
.input-field-category
  height: 57px
  font-size: 16px
  font-weight: bold
  color: rgba(0,0,0,1)
  line-height: 41px
  .label
    &::before
      content: '【'
    &::after
      content: '】'
.simple-field
  align-items: center
  .q-field
    width: $simpleFieldWidth
    align-items: center
  // .q-field__control
  //   &::before
  //     border: 0 !important
  .q-field--readonly
    // background: rbga(0,0,0,0) !important
    .q-field
      width: $simpleFieldWidth
    .q-field__control
      padding: 0
      border: 0
      &::before
        border: 0 !important
      &:hover
        background: rgba(0,0,0,0) !important
  .q-field__control
    width: $simpleFieldWidth
    padding: 0 8px
    height: 35px
    min-height: 35px
    background: $editorAreaBackground
    border: 1px solid rgba(191,191,191,0.5)
    border-radius: 6px
  .q-field__control-container
    line-height: 35px
    margin: 0
  .q-field__before
    display: inline-block
  .q-input
    font-size: 14px
    font-weight: 400
    color: rgba(0,0,0,1)

.input-field-date-range, .input-field-year-range, .input-field-time-range
  .simple-field
    flex: 0

.input-field-dynamic-list,.input-field-fixed-list,.input-field-mixed-table
  .q-table
    & tr
      height: 35px
    & th
      padding-top: 0
      padding-bottom: 0
    .q-td
      padding: 0
      margin: 0
      width: auto
      height: auto
      .input-field-wrapper
        padding: 0
        margin: 0
        max-height: 100%
    .simple-field
      min-width: 10px
      // max-width: 180px
      margin: 0
      padding: 0
      .q-field
        width: 100%
        & *, .q-field__control::before
          border: 0
          border-radius: 0
        input
          padding: initial
    .input-field-select>span
      width: 100%

.input-field-select
  .q-field__native
    padding-bottom: 0

.input-field-select-chain
  span:nth-child(2)
    width: 100%
  label
    width: 100%
    // &:nth-child(1)
    //   padding-left: 8px
  .simple-field
    max-width: $simpleFieldWidth

.input-field-select-ascheck
  .field-label
    align-self: center
  &>.column
    margin-left: -10px

.input-field-select-chain
  .field-label
    align-self: center

// portal
.portal-layout
  // .q-page-container
  //   margin: 0px 50px 50px 50px
  .sliding-news
    padding-left: 18px
    padding-right: 18px
    background: $background
    font-size: 16px
    color: white
    // line-height: 41px
    & *
      background: $grey-6
    &-title
      padding-right: 16px
    .sliding-news-label
      font-weight: bold
      color: white
      font-size: 16px
      .sliding-news-label-icon
        // height: 18px
        // width: 18px
        // margin-right: 14px
        font-size: 18px
    .sliding-news-right
      // line-height: 40px
      height: 100%
    .sliding-news-close-btn
      color: $grey-5
      font-size: 12px
      padding: 0
      margin: 0 18px 0 24px
    .sliding-news-close-btn:hover
      background: $grey-5
      color: $grey-9
  .portal-main-toolbar
    height: 60px
    padding: 0 50px
    .portal-logo
      width: 391px
      height: 49px
      margin: 5px 0
    .portal-main-toolbar-buttons .e-icon
      width: 18px
      height: 18px
      // margin-right: 10px
    .portal-main-toolbar-buttons
      .q-btn,.welcome-info
        margin-left: 39px
        font-size: 16px
        font-weight: bold
      .q-img
        display: block
  .portal-main-menu
    height: 60px
    background: $background
    font-size: 16px
    font-weight: 400
    color: #5A5A5A
    line-height: 30px
    &>div>a
      min-width: 110px
      margin: 0 4px
    .active,
    .q-btn:active
      font-weight: bold
      color: rgba(16,108,211,1)
      background: #D9E8F2
      border-radius: 5px
    .q-btn:hover
      background: $background
  .portal-sliding-head
    background: $background
    color: #555555
    padding: 5px
    border-radius: 5px
  .portal-main-content-wrapper
    .filter-area
      .input-field-wrapper
        .simple-field
          margin-right: 12px
        .field-label
          width: auto
          min-width: 56px
          margin: 0 4px
          font-size: 12px
          font-weight: 400
          color: rgba(142,142,142,1)
          vertical-align: middle
          &::after
            content: ''
        .q-field__before
          padding: 0
        .q-field__control
          max-width: 150px
          &::before
            border: 0
            border-radius: 0
        .keyword
          flex-grow: 1 !important
          & *
            flex-grow: 1 !important
          .q-field__control
            width: 100% !important
            max-width: 100%
      .query-btn
        @extend .btn-primary
      .clear-btn
        @extend .btn-secondary

// footer
.main-footer
  // height: 180px
  padding: 15px 50px 45px 50px
  *
    color: rgba(255,255,255,1)
  .footer-logo
    width: 391px
    height: 49px
  .footer-menu-title
    height: 15px
    font-size: 16px
    font-family: FZZhengHeiS-B-GB
    font-weight: 400
    color: rgba(216,216,216,1)
    line-height: 41px
  .footer-menu-title-dot
    display: inline-block
    width: 3px
    height: 3px
    background: white
    border-radius: 50%
    margin-right: 6px
  .q-item__label--caption
    margin-left: 8px
    height: 15px
    font-size: 14px
    font-weight: 400
    // text-decoration: underline
    line-height: 36px
    color: rgba(255,255,255,1)
    white-space: nowrap
    .text
      border-bottom: 1px solid rgba(255,255,255,0.8)
      padding-bottom: 2px
  .q-item--active
    background: $primary
    & *
      color: $primary
      font-weight: bold
  .footer-qrcode
    font-size: 128px
    width: 128px
    height: 128px
    cursor: pointer
  .footer-copyright
    & *
      color: #8e8e8e

.input-field-wrapper
  .field-label
    // font-size: 14px !important
    font-weight: 400
    // color: rgba(142,142,142,1) !important
    vertical-align: middle
    &.required::before
      content: '*'
      color: red
    .required-mark
      display: none
// admin page
.admin-layout,.register-layout,.recover-layout
  .admin-main-toolbar
    height: 60px
    // padding: 0 50px
    .admin-logo
      width: 391px
      height: 49px
      margin: 5px 0
    .q-avatar .e-icon
      width: 32px
      height: 32px
    .user-name
      width: 97px
      height: 33px
      font-size: 14px
      font-weight: 400
      color: rgba(255,255,255,1)
      line-height: 16px
      white-space: nowrap
      .date-label
        margin-top: 4px
        font-size: 10px
        color: rgba(255,255,255,0.5)
        line-height: 12px
  .q-page-container
    // margin: 12px// 50px 20px 50px
    .leveled-menu
      max-width: 220px
      padding: 10px 0
      font-size: 16px
      font-weight: 400
      color: rgba(90,90,90,1)
      line-height: 30px
      white-space: nowrap
      overflow: hidden
      background: $background
      border-radius: 5px
      .q-item
        min-height: 50px !important
      .q-expansion-item
        margin: 0 2px
        .simple-expand-icon
          display: none
        .q-item__section--avatar
          min-width: 32px !important
          i
            font-size: 18px
        .q-expansion-item__content
          padding-left: 0 !important
          .leveled-menu .header
            padding-left: 32px
      .q-item.q-router-link--active, .q-item--active
        // background: rgba(217,232,242,1)
        border-radius: 5px
        font-size: 16px
        font-weight: bold
        color: $primary
        line-height: 30px
    .admin-main-content-wrapper,.register-content,.recover-content
      // margin-left: 10px
      // background: white
      .flow-list,.flow-step,.step-left
        // background: $bodyBackground
      .vgap,.hgap
        // background: $bodyBackground
      .summary-head-wrapper
        height: 150px
        border-radius: 6px
        background: $background
        margin-bottom: 16px
        .summary-head-number
          font-size: 12px
          font-weight: bold
          color: rgba(90,90,90,1)
      .flow-editor-content
        background: $bodyBackground
        .flow-action-buttons
          background: $background
          border-radius: 6px
        .flow-step-input-fields
          background-color: $background
          padding: 24px
        // padding: 24px
      //   .simple-field
      //     background: rbga(0,0,0,0)
      //     .q-field__control
      //       padding: 0
      //       // border: 0
      //       background: rgba(0,0,0,0)
      //       border-radius: 0
      //       // &:hover
      //       //   background: rgba(0,0,0,0)
      .q-stepper.flow-step
        .q-stepper__header
          // flex-wrap: nowrap
          min-height: 150px
          border-radius: 6px
          .q-stepper__label
            .q-stepper__caption
              display: none
            .q-stepper__title
              font-size: 16px
              font-weight: bold
              margin-top: 16px
          .q-focus-helper
            display: none
          .q-ripple
            display: none
          .q-stepper__dot
            width: 60px
            height: 60px
            border-radius: 0
            background: rgba(0,0,0,0)
            font-size: 60px
            line-height: 60px
            i
              color: $grey-6
              font-size: 60px
              line-height: 60px
            img
              width: 100%
              height: 100%
            span
              color: unset
            &::after,&::before
              // display: none
              background: unset
              border-top: 1px dashed rgba(0,0,0,0.12)
          .q-stepper__tab--
            &active
              position: unset
              &::after
                content: ''
                position: absolute
                top: 150px
                width: 18px
                height: 18px
                border-width: 9px
                border-style: dashed dashed dashed solid
                border-color: currentColor transparent transparent transparent
            &error i
              color: #EC6D70
            &done i
              color: #63BC81
            &disabled
              color: #8E8E8E
        .q-stepper__content
          // .q-stepper__step-inner
            // padding-top: 0
          // .field-label
          //   font-size: 14px
          //   font-weight: 400
          //   color: rgba(142,142,142,1)
          //   vertical-align: middle
          //   &.required::before
          //     content: '*'
          //     color: red
          //   .required-mark
          //     display: none
          border-radius: 5px
          .flow-action-buttons
            border-radius: 5px
            padding-top: 4px
            padding-bottom: 4px
            // height: 28px
            .q-btn
              // margin-top: 0
              // margin-bottom: 0
              width: 106px
              height: 33px
              border-radius: 5px
          .flow-step-submit-log
            font-size: 14px
            font-weight: 400
            .q-timeline__title
              font-size: 14px
              font-weight: bold
              margin-bottom: 14px
            .q-timeline__subtitle
              display: none
            .q-timeline__content
              padding-bottom: 18px
            .entry
              .date
                position: absolute
                right: 0
                top: 0
                .label
                  display: none
            .entry-
              &-1
                color: rgba(236,109,112,1)
                .q-timeline__dot
                  &::before,&::after
                    color: rgba(236,109,112,1)
              &1
                color: rgba(99,188,129,1)
                .q-timeline__dot
                  &::before,&::after
                    color: rgba(99,188,129,1)
              &0
                color: $grey-7
                .q-timeline__dot
                  &::before,&::after
                    color: $grey-7
              &recall
                color: $grey-8
                .q-timeline__dot
                  &::before,&::after
                    color: $grey-8
          .flow-step-input-fields
            min-height: 800px
      .sticky-button
        & >div .column .q-btn
          .q-btn__wrapper
            min-height: unset
            padding-top: 0
            line-height: 35px
        .q-fab__actions
          .q-btn
            width: 106px
          .q-btn__wrapper
            padding-top: 0
      .flow-action-btn-,.sticky-button-
        &previous,&next, &print, &export,&create,&register,&regaudit,&cancel
          @extend .btn-secondary
        &submit,&save, &recall,&recallop,&remove,&enable,&edit,&sign,&assign,&sback,&delete,&recallnotify,&change,&resetpwd,&tosteptwo,&off,&offnotify,&return
          @extend .btn-primary

.input-field-wrapper.without-label
  &>.simple-field>.q-field>.q-field__before,
  &>.input-field-text>.q-field>.q-field__before,
  &>.input-field-dynamic-list>.q-field>.q-field__before,
  &>.input-field-select>span>.q-field>.q-field__before
    display: none
.input-field-wrapper.without-label
  &>.input-field-text
    height: 100%
    min-height: 100%
.input-field-wrapper.without-label
  &>.input-field-dynamic-list>.q-table__container,
  &>.input-field-fixed-list>.q-table__container
    margin: 0
.input-field-wrapper.with-label
  &>.simple-field>.q-field>.q-field__before
    display: inline-block
  .input-field-rich
    .content
      margin-left: 12px

.input-field-wrapper .input-field-tips
  position: relative
  margin-left: $fieldLabelWidth + 10px
  margin-top: 6px
  font-size: 12px
  font-weight: 400
  color: rgba(0,135,197,1)
  padding-right: 20px
  .tips-list
    .input-field-tips-tip
      display: block
      .tip-link
        font-size: 14px
        font-weight: bold
        color: rgba(16,108,211,1)
        a,a:visited
          color: rgba(16,108,211,1)
        &-prefix::before
          content: '【'
        &-postfix::after
          content: '】'
        &-text
          text-decoration: underline
  &-prefix
    display: inline-block
    position: absolute
    width: 18px
    height: 18px
    border: 2px solid
    border-radius: 50%
    margin-right: 4px
    top: 0px
    left: 0
    & + .tips-list
      position: relative
      left: 24px
  &-postfix
    display: inline-block
    position: absolute
    top: 0px
    left: 6px
    width: 6px
    height: 3px
    background: $background
    &::after
      display: inline-block
      position: absolute
      content: '!'
      font-size: 16px
      font-weight: 700
      width: 3px
      top: -6px
      left: 2px
      transform: translateX(-50%)
      -moz-transform: translateX(-50%)
      -ms-transform: translateX(-50%)

.input-field-wrapper-agreement .input-field-tips
  margin-top: 0

.simple-field
  .postfix, .prefix
    font-size: 12px

.input-field-agreement-check
  .input-field-tips
    margin-left: 0 !important
    margin-top: 0 !important
    left: 0 !important
    &-prefix
      display: none
      & + .tips-list
        left: 0
    &-postfix
      display: none
  & + .input-field-tips
    display: none

// flow list
.summary-head-wrapper
  margin-bottom: 8px
  .last-summary
    position: relative
  .last-summary:after
    position: absolute
    content: ''
    background: $grey-4
    width: 1px
    height: 70px
    right: 0
    top: 40px
  .summary-head-item
    flex-direction: column
    .summary-head-icon
      height: 60px
      width: 60px
    .is-number
      font-size: 12px !important
      font-weight: bold
      color: rgba(90,90,90,1)
      line-height: 12px !important
    .summary-head-label
      font-size: 16px
      font-weight: 400
      color: rgba(142,142,142,1)
      line-height: 16px !important
    .summary-head-btn
      width: 104px
      height: 35px
      background: rgba(255,29,63,1)
      border-radius: 7px
      font-size: 14px
      font-weight: 400
      color: rgba(255,255,255,1)
      .q-btn__wrapper
        min-height: 1em
// .user-profile-btn,
// .user-profile-menu
//   width: 210px

.user-profile-menu
  // background: rgba(67,67,67,1)
  // width: 191px
  .logout-btn
    font-size: 14px
    font-weight: 400
    // color: rgba(255,255,255,1)
    border-radius: 0
.input-field--error
  border: 1px solid red
  border-radius: 5px

// uploader components
.input-field-file,.input-field-image, .input-field-file-list,.input-field-image-list
  .q-uploader__header
    display: none
  .q-uploader:not(.only-icon)
    max-height: unset
    margin-left: 12px
  .q-uploader__list
    min-height: unset !important
    padding: 0 !important
  .upload-btn,.add-btn
    background: rgba(243,152,0,1)
    border-radius: 5px
    font-size: 14px
    font-weight: 400
    color: rgba(255,255,255,1)
    margin-right: 8px
  .delete-btn
    height: 24px !important
    width: 24px !important
    font-size: 14px
    background: rgba(255,29,63,1)
    font-weight: 400
    color: rgba(255,255,255,1)
    border-radius: 50%
    .q-btn__wrapper
      min-width: 1em
      min-height: 1em
  .file-list
    margin-top: 0px
    overflow: hidden
    .file-list-item
      height: 130px
      display: flex
      flex-direction: column
      margin-top: 24px
      .file-image
        width: 100px
        height: 100px
        border: 1px solid $grey-4
        &:hover
          cursor: pointer
          .view-btn-wrapper
            display: block
        .view-btn-wrapper
          height: 100px
          width: 100px
          background: rgba(0, 0, 0, 0.46)
          display: none
          .view-btn
            font-size: 14px
            font-weight: bold
            color: rgba(255,255,255,1)
        .q-icon
          font-size: 64px

      .file-size
        display: none
      .file-name
        width: 100%
        text-align: center
        position: absolute
        top: 105px
        font-size: 12px
        font-weight: 400
        color: rgba(90,90,90,1)
        a
          white-space: nowrap
      .delete-btn
        border-radius: 50% !important
        position: absolute
        top: -8px
        right: -8px
.input-field--readonly
  &.input-field-file,
  &.input-field-image,
  &.input-field-file-list,
  &.input-field-image-list
    position: relative
    .file-list
      position: relative
      top: -24px
  &.input-field-rich
    .content
      margin-left: 8px

.input-field-field-type-options
  .q-field__control
    padding: 0 8px !important

//input-field-radio-list
.q-radio__inner--truthy .q-radio__check
  color: green
.input-field-radio-list
  .q-item
    height: 100px
    // padding: 0 !important
    // margin: 10px auto
    // border: 1px dashed grey
    .icon-section
      width: 94px
      .icon
        width: 64px
        height: 64px
    .label-section
      padding-right: 10px
      .label
        font-size: 16px
        font-weight: bold
        color: rgba(0,0,0,1)
      .description
        font-size: 14px
        font-weight: 400
        color: rgba(142,142,142,1)
      &:after
        content: ''
        width: 1px
        height: 45px
        background: rgba(210,210,210,1)
        position: absolute
        top: 30px
        right: 70px
//
.input-field-fixed-list,.input-field-dynamic-list,.input-field-mixed-table
  .q-table
    overflow: hidden
  .q-table__container
    margin-left: 12px
    // .simple-field
    //   .readonly-content
    //     white-space: normal
    .q-table__bottom
      border-left: 1px solid rgba(191,191,191,0.5)
      height: 24px !important
      min-height: 24px !important
      .summary-tr
        position: relative
        display: flex
        flex-wrap: wrap
        justify-content: flex-end
        width: 100%
        // height: 24px
        .summary-td
          border: 0
        //   position: absolute
        //   right: 0px
          // line-height: 18px
          // padding-right: 20px
    .q-table__container
      margin: 0
      border: 0
      border-radius: 0
      .q-td:first-child
        border-left: 0
  .simple-field.input-field--readonly
    & span.full-width
      display: flex
      .readonly-content>span
        line-height: 35px
  .input-field-file, .input-field-image
    .file-list
      justify-content: center

.input-field-
  &select,&year,&year-range,&select-chain
    .q-field--error
      .q-select__dropdown-icon
        display: none
.input-field-select-chain
  .q-field--labeled .q-field__native
    padding-bottom: 0

// readonly
.input-field--readonly
  &.simple-field
    min-height: 35px
  .input-field-wrapper
    margin: 0
    & *
      white-space: normal
      overflow: hidden
  .q-field__control
    // background: rgba(0, 0, 0, 0)
    width: unset !important
    // min-width: 0
    // max-width: 100%
  .q-field__append
    display: none
  .input-field-warning,.uploader-btns,.delete-btn
    display: none !important
  .file-list
    margin-top: 0 !important
  .q-td
    margin: 0
    padding: 0
    height: auto !important
  .required-mark
    display: none
.field-label-readonly
  margin-right: 12px

.input-field-search:not(.input-field--readonly),
.input-field-text:not(.input-field--readonly)
  .q-field__control
    border-radius: 5px
    background: $editorAreaBackground
    &::before
      display: none
// .input-field-text.input-field--readonly
//   .q-field__control
//     border-radius: 5px
//     &::before
//       // border: 1px solid rgba(191,191,191,0.5)
//     &::after
//       display: none
//     textarea
//       resize: none
// search dialog
.input-field-search
  height: 35px
  .q-field__control
    padding-right: 0 !important
    // border: 0
.input-field-search-dialog-card
  .simple-field
    padding-top: 12px
    .q-field__control
      max-width: 100%
      width: 100%
.flow-submit-dialog.input-field-list
  .title
    padding: 0 70px
    color: #FF1D3F
    font-size: 14px
  .simple-field .q-field, .simple-field .q-field__control
    width: 100%

// table borders
.input-field-mixed-table,.input-field-fixed-list,.input-field-dynamic-list
  .q-table__container
    box-shadow: none
    border: 1px solid rgba(191,191,191,0.5)
    border-radius: 5px
.input-field-mixed-table
    .q-table__top
      border-left: 1px solid rgba(0, 0, 0, 0.12)
// have border issue when have span
.input-field-mixed-table
  .q-table__container
    border-left: 0
  td:first-child
    border-left: 1px solid rgba(0,0,0,0.12)

.input-field-separator
  margin: 30px auto
  background: rgba(210,210,210,1)

.q-date .q-date__header,.q-time .q-time__header
  display: none

.input-field-rich
  .tox-tinymce
    border-radius: 5px

.input-field-query-filters
  .query-btns
    .q-btn
      margin-right: 10px
    .q-btn
      .q-icon
        margin-right: 6px
      .q-btn__content>div
        position: relative
        top: -1px
  .input-field-check .field-label-empty
    width: 30px
    min-width: unset
  .simple-field
    min-width: 200px

.basic-dialog-card
  .action-buttons
    min-height: 68px
    margin-bottom: 0px
    bottom: 0
    // position: absolute
    position: relative
    border-top: 1px solid $grey-4
  .warning
    font-size: 12px
    font-weight: 400
    color: rgba(234,7,50,1)
    margin: 0 50px
    overflow: hidden
    white-space: nowrap
    display: inline-block
    &-icon
      position: relative
      top: -7px
      display: inline-block
      border-width: 8px
      border-color: transparent transparent #FF8244 transparent
      border-style: dashed
      transform: scaleY(2.3)
      &-sign-top
        position: relative
        top: -2px
        left: -9px
        background: $primary
        display: inline-block
        width: 2px
        height: 8px
      &-sign-dot
        position: relative
        top: 3px
        left: -10px
        background: $primary
        display: inline-block
        width: 3px
        height: 3px
        transform: translateX(-50%)
        -moz-transform: translateX(-50%)
        -webkit-transform: translateX(-50%)
        -ms-transform: translateX(-50%)
    &-text
      overflow: hidden
      white-space: normal

// .sticky-button .cancel
//   @extend .btn-secondary
//   height: auto
// .sticky-button .save
//   @extend .btn-primary
//   height: auto

.bg-sticky
  background: rgb(255, 29, 63)

// login page etc.
.login-layout,.register-layout,.recover-layout
  @extend .admin-layout
  .simple-field
    min-width: 250px

.pttasks-task-info-dialog
  .field-label
    min-width: 80px !important
    width: 80px !important
  .input-field-static
    margin-left: 40px
